<template>
    <div class="layout">
        <div class="top-nav" ref="topNav">
            <div
                class="top-nav-item"
                @click="topNavValue = index"
                v-for="(item, index) in topNavList"
            >
                {{ item.label }}
            </div>
        </div>
        <div class="header-nav" ref="headerNav">
            <div
                class="header-nav-item"
                @click="headerNavValue = index"
                v-for="(item, index) in headerNavList"
            >
                <span>{{ item.label }}</span>
            </div>
        </div>
        <div class="content">
            <ul
                v-infinite-scroll="load"
                class="content-list"
                :infinite-scroll-distance="10"
                :infinite-scroll-immediate="true"
                :infinite-scroll-disabled="disabled"
            >
                <li v-for="i in leaveList" :key="i">
                    <router-link :to="leavePaths[i.leaveType - 1] + i.id">
                        <div class="info">
                            <span class="header" v-if="i.leaveType == 1"
                                >你的请假申请</span
                            >
                            <span class="header" v-else-if="i.leaveType == 2"
                                >你的放行条申请</span
                            >
                            <span class="header" v-else-if="i.leaveType == 4"
                                >你的留宿申请</span
                            >
                            <span>{{ i.createTime }}</span>
                        </div>
                        <span
                            v-if="
                                i.state == 16 || i.state == 22 || i.state === 4
                            "
                        >
                            已通过
                        </span>
                        <span v-else-if="i.state === 1 || i.state === 0">
                            待审批
                        </span>
                        <span v-else-if="i.state === 15"> 未通过 </span>
                        <span v-else-if="i.state === 5"> 审核中 </span>
                        <span v-else-if="i.state === 3"> 已拒绝 </span>
                    </router-link>
                </li>
                <div
                    v-loading="loading"
                    v-if="loading"
                    style="
                        width: 40rem;
                        height: 40rem;
                        margin-top: 25rem;
                        background: #f7f7f7;
                    "
                ></div>
                <p
                    style="
                        margin-top: 10rem;
                        margin-bottom: 10rem;
                        font-size: 12rem;
                        color: #333;
                    "
                    v-show="noMore"
                >
                    没有数据了
                </p>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { reqLeaveMore, reqReserve } from '@/api/student/index';

const topNav = ref();
const headerNav = ref();
const topNavValue = ref(0);
const headerNavValue = ref(0);
const leaveList = ref([]);
let count = 1;
const leavePaths = ref([
    '/student/leave/',
    '/student/pass/',
    '',
    '/student/stay/',
    '/student/leave/',
    '/student/leave/'
]);

onMounted(() => {
    topNav.value.children[topNavValue.value].classList.add(
        'top-nav-item-active'
    );
    headerNav.value.children[headerNavValue.value].classList.add(
        'header-nav-item-active'
    );
    // load();
});

const NavList = [
    {
        label: '请假条/放行条查看',
        value: 1,
        headerNavList: [
            {
                label: '全部',
                value: 'pageNo=1&pageSize=4&states='
            },
            {
                label: '正在审核',
                value: 'pageNo=1&pageSize=4&states=1&states=2&states=5&states=11&states=17&states=23'
            },
            {
                label: '通过审核',
                value: 'pageNo=1&pageSize=4&states=6&states=16&states=22&states=28&states=33'
            },
            {
                label: '未通过审核',
                value: 'pageNo=1&pageSize=4&states=3&states=10&states=15&states=21&states=27'
            }
        ]
    },
    {
        label: '预约记录查看',
        value: 2,
        headerNavList: [
            {
                label: '全部',
                value: 'pageNo=1&pageSize=8&restrictState=0'
            },
            {
                label: '正在审核',
                value: 'pageNo=1&pageSize=8&restrictState=0'
            },
            {
                label: '通过审核',
                value: 'pageNo=1&pageSize=8&restrictState=0'
            },
            {
                label: '未通过审核',
                value: 'pageNo=1&pageSize=8&restrictState=0'
            }
        ]
    }
];

const topNavList = ref([
    {
        label: '请假条/放行条查看',
        value: 1
    },
    {
        label: '预约记录查看',
        value: 2
    }
]);

const headerNavList = ref([
    {
        label: '全部',
        value: 1
    },
    {
        label: '正在审核',
        value: 2
    },
    {
        label: '通过审核',
        value: 3
    },
    {
        label: '未通过审核',
        value: 4
    }
]);
// 切换后加载状态重置
const loadReset = () => {
    count = 1;
    leaveList.value = [];
    loading.value = false;
    noMore.value = false;
};

watch(topNavValue, (newTopNavValue, oldTopNavValue) => {
    loadReset();
    topNav.value.children[oldTopNavValue].classList.remove(
        'top-nav-item-active'
    );
    topNav.value.children[newTopNavValue].classList.add('top-nav-item-active');
    load();
    load();
    load();
});

watch(headerNavValue, (newHeaderNavValue, oldHeaderNavValue) => {
    loadReset();
    headerNav.value.children[oldHeaderNavValue].classList.remove(
        'header-nav-item-active'
    );
    headerNav.value.children[newHeaderNavValue].classList.add(
        'header-nav-item-active'
    );
    load();
    if (disabled.value) {
        load();
        if (disabled.value) {
            load();
        }
    }
});

const load = async () => {
    loading.value = true;
    const str = NavList[topNavValue.value].headerNavList[
        headerNavValue.value
    ].value.replace('pageNo=1', `pageNo=${count}`);
    count++;
    if (topNavValue.value === 0) {
        try {
            const res = await reqLeaveMore(str);
            if (res.status === '200') {
                if (res.dataList) {
                    leaveList.value.push(...res.dataList);
                    loading.value = false;
                    noMore.value = res.dataList.length <= 3;
                } else {
                    loading.value = false;
                    noMore.value = true;
                }
            }
        } catch (err) {}
    } else {
        try {
            const res = await reqReserve(str);
            if (res.status === '200') {
                res.dataList.forEach(element => {
                    leaveList.value.push(element);
                });
                loading.value = false;
                noMore.value = res.dataList.length <= 3;
            }
        } catch (err) {}
    }
};

const loading = ref(false);
const noMore = ref(false);
const disabled = computed(() => loading.value || noMore.value);
</script>

<style lang="scss" scoped>
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    .top-nav {
        width: 100%;
        height: 5%;
        display: flex;
        background-color: #eee;
        .top-nav-item {
            flex: 1;
            height: 100%;
            color: #333;
            font-size: 16rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .top-nav-item-active {
            background-color: #2ba0ff;
            color: white;
        }
    }
    .header-nav {
        width: 100%;
        height: 5%;
        display: flex;
        .header-nav-item {
            height: 100%;
            font-size: 12rem;
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: end;
            color: #333;

            span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 70%;
                height: 70%;
                border-radius: 5rem;
            }
        }
        .header-nav-item-active {
            span {
                background-color: #2ba0ff;
                color: white;
            }
        }
    }
    .content {
        margin-top: 10rem;
        background-color: #f7f7f7;
        width: 100%;
        height: 90%;
        .content-list {
            width: 100%;
            height: 100%;
            align-self: start;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
            overflow: auto;
            > li {
                width: 100%;
                height: 10%;
                border-bottom: #ddd 1px solid;
                a {
                    width: 100%;
                    height: 100%;
                    font-size: 15rem;
                    display: flex;
                    justify-content: space-between;
                    color: #555;
                    > div {
                        margin-left: 10rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        .header {
                            font-weight: bold;
                        }
                    }
                    > span {
                        margin-right: 10rem;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>
